<template>
  <div v-if="checkedIds.length && checkedIds.length > 0" class="toolbars">
    <div style="padding-left: 20px">已选择{{ checkedIds.length }}个广告</div>
    <n-divider vertical />
    <div class="content">
      <div class="item" @click="handleChangeStatus('AD_STATUS_NORMAL')">
        <x-icon color="#fff" name="icon-119" style="margin-right: 4px; margin-top: 2px" />
        启用
      </div>
      <div class="item" @click="handleChangeStatus('AD_STATUS_SUSPEND')">
        <x-icon color="#fff" name="icon-120" style="margin-right: 4px; margin-top: 2px" />
        暂停
      </div>
      <div class="item" @click="handleDelete()">删除</div>
      <div v-if="getProps.type === 'ad'" class="item" @click="handleAutoAcquisition()">一键起量</div>
      <div v-if="getProps.type === 'ad'" class="item" @click="handleDateTime()">修改投放日期</div>
      <div v-if="getProps.type === 'ad'" class="item" @click="handleTime()">修改投放时间</div>
      <div v-if="getProps.type === 'ad'" class="item" @click="handleChangeCostPrice()" @success="handleSuccess"
        >修改出价</div
      >
    </div>
    <div class="item float-right" @click="closeChecked"> x </div>
    <AdCostPriceModal v-if="costPriceData.show && initChecked" :modal-data="costPriceData" @success="handleSuccess" />
    <AdAutoAcquisitionModal
      v-if="autoAcquisitionData.show && initChecked"
      :modal-data="autoAcquisitionData"
      @success="handleSuccess"
    />
    <AdDateTimeModal v-if="dateTimeData.show && initChecked" :modal-data="dateTimeData" @success="handleSuccess" />
    <AdTimeModal v-if="timeData.show && initChecked" :modal-data="timeData" @success="handleSuccess" />
    <!--    <AdTargetingModal v-if="targetingData.show && initChecked" :modal-data="targetingData" @success="handleSuccess" />-->
    <!--    <AdDailyBudgetModal-->
    <!--      v-if="dailyBudgetData.show && initChecked"-->
    <!--      :modal-data="dailyBudgetData"-->
    <!--      @success="handleSuccess"-->
    <!--    />-->
    <!--    <AdBidStrategyModal-->
    <!--      v-if="bidStrategyData.show && initChecked"-->
    <!--      :modal-data="bidStrategyData"-->
    <!--      @success="handleSuccess"-->
    <!--    />-->
    <!--    <AdExpectedRoiModal-->
    <!--      v-if="expectedRoiData.show && initChecked"-->
    <!--      :modal-data="expectedRoiData"-->
    <!--      @success="handleSuccess"-->
    <!--    />-->
  </div>
</template>

<script setup lang="ts">
  import { XIcon } from '@/components'
  import { useRoute } from 'vue-router'
  import { reactive, ref, watch } from 'vue'
  import { NDivider, useMessage, useDialog } from 'naive-ui'
  import { useStore } from '@/store'
  import AdCostPriceModal from '@/views/advertising/components/AdCostPriceModal.vue'
  import AdAutoAcquisitionModal from '@/views/advertising/components/AdAutoAcquisitionModal.vue'
  import AdTimeModal from '@/views/advertising/components/AdTimeModal.vue'
  import AdDateTimeModal from '@/views/advertising/components/AdDateTimeModal.vue'
  // import AdTargetingModal from '@/views/advertising/components/AdTargetingModal.vue'
  // import AdDailyBudgetModal from '@/views/intelligent/account/components/AdDailyBudgetModal.vue'
  // import AdBidStrategyModal from '@/views/intelligent/account/components/AdBidStrategyModal.vue'
  // import AdExpectedRoiModal from '@/views/intelligent/account/components/AdExpectedRoiModal.vue'
  // import { adgroupUpdate } from '@/api/intelligent'
  const dialog = useDialog()
  const route = useRoute()
  const store = useStore()
  const message = useMessage()
  const emit = defineEmits(['success', 'closeChecked'])
  const props = defineProps({
    checkedIds: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: ''
    },
    checkedData: {
      type: Array,
      default: () => []
    }
  })
  const getProps = reactive(props)
  const checkedIds = ref(getProps.checkedIds)
  const checkedData = ref(getProps.checkedData)
  const initChecked = ref(false)
  const costPriceData = ref({
    show: false,
    adgroupIdList: checkedIds.value,
    checkedData: checkedData.value
  })
  const autoAcquisitionData = ref({
    show: false,
    adgroupIdList: checkedIds.value,
    checkedData: checkedData.value
  })
  const dateTimeData = ref({
    show: false,
    adgroupIdList: checkedIds.value,
    checkedData: checkedData.value
  })
  const timeData = ref({
    show: false,
    adgroupIdList: checkedIds.value,
    checkedData: checkedData.value
  })
  const msgReactive = ref()
  watch(
    () => getProps.checkedIds,
    (val) => {
      checkedIds.value = val
      initChecked.value = false
      costPriceData.value.adgroupIdList = val
      autoAcquisitionData.value.adgroupIdList = val
      timeData.value.adgroupIdList = val
    },
    {
      immediate: true
    }
  )
  watch(
    () => getProps.checkedData,
    (val) => {
      checkedData.value = val
    },
    {
      immediate: true
    }
  )
  function handleChangeStatus(type) {
    let msg = '正在修改中，请稍后...'
    msgReactive.value = message.create(msg, {
      type: 'loading',
      duration: 60000
    })
    const params = {}
    let apiUrl = 'gdtAdgroupsBatchStatus'
    let title = '广告'
    console.log(getProps.checkedIds, getProps.checkedData, 1111111)
    if (getProps.type === 'ad') {
      const list = []
      getProps.checkedData.forEach((item) => {
        list.push({
          accountCode: item?.accountCode,
          outAdgroupId: item?.adgroupId,
          configuredStatus: type
        })
      })
      params.adgroupList = list
      apiUrl = 'gdtAdgroupsBatchStatus'
    }
    if (getProps.type === 'media') {
      const list: { accountCode: any; outAdgroupId: any; configuredStatus: any }[] = []
      getProps.checkedData.forEach((item) => {
        list.push({
          accountCode: item?.accountCode,
          outCreativeId: item?.dynamicCreativeId,
          configuredStatus: type
        })
      })
      params.creativeList = list
      apiUrl = 'gdtCreativeBatchStatus'
      title = '创意'
    }
    console.log(params)
    store.dispatch(`intelligent/${apiUrl}`, params).then((res) => {
      msg = `修改${title}状态成功`
      msgReactive.value.content = msg
      msgReactive.value.type = 'success'
      setTimeout(() => {
        msgReactive.value?.destroy()
      }, 1000)
      handleSuccess()
    })
  }
  // 媒体专属删除
  function handleDelete() {
    dialog.warning({
      title: '警告',
      content: '删除后，将删除该广告下所有创意，且删除操作不可撤回',
      positiveText: '继续',
      negativeText: '取消',
      onPositiveClick: () => {
        let msg = '正在删除中，请稍后...'
        msgReactive.value = message.create(msg, {
          type: 'loading',
          duration: 60000
        })
        const params = {}
        let apiUrl = 'gdtBatchDelete'
        if (getProps.type === 'ad') {
          const list: { accountCode: any; outAdgroupId: any }[] = []
          getProps.checkedData.forEach((item) => {
            list.push({
              outAdgroupId: item?.adgroupId,
              accountCode: item?.accountCode
            })
          })
          params.adgroupList = list
          apiUrl = 'gdtBatchDelete'
        }
        if (getProps.type === 'media') {
          const list = []
          getProps.checkedData.forEach((item) => {
            list.push({
              accountCode: item?.accountCode,
              outCreativeId: item?.dynamicCreativeId
            })
          })
          params.creativeList = list
          apiUrl = 'gdtCreativeBatchDelete'
        }
        console.log(params)
        store.dispatch(`intelligent/${apiUrl}`, params).then((res) => {
          msgReactive.value.content = '删除成功'
          msgReactive.value.type = 'success'
          setTimeout(() => {
            msgReactive.value?.destroy()
          }, 1000)
          handleSuccess()
        })
      },
      onNegativeClick: () => {}
    })
  }
  // 修改出价
  function handleChangeCostPrice() {
    initChecked.value = true
    costPriceData.value = {
      show: true,
      adgroupIdList: checkedIds.value,
      checkedData: JSON.parse(JSON.stringify(checkedData.value))
    }
  }
  // 修改一键起量
  function handleAutoAcquisition() {
    initChecked.value = true
    autoAcquisitionData.value = {
      show: true,
      adgroupIdList: checkedIds.value,
      checkedData: JSON.parse(JSON.stringify(checkedData.value))
    }
  }
  // 修改投放日期
  function handleDateTime() {
    initChecked.value = true
    dateTimeData.value = {
      show: true,
      adgroupIdList: checkedIds.value,
      checkedData: JSON.parse(JSON.stringify(checkedData.value))
    }
  }
  // 修改投放时间
  function handleTime() {
    initChecked.value = true
    timeData.value = {
      show: true,
      adgroupIdList: checkedIds.value,
      checkedData: JSON.parse(JSON.stringify(checkedData.value))
    }
  }
  // 修改日预算
  function handleDailyBudget() {
    initChecked.value = true
    dailyBudgetData.value.show = true
  }
  // 修改出价策略
  function handleBidStrategy() {
    initChecked.value = true
    bidStrategyData.value.show = true
  }
  // 修改期望ROI
  function handleExpectedRoi() {
    initChecked.value = true
    expectedRoiData.value.show = true
  }
  // 修改成功
  function handleSuccess() {
    emit('success')
  }
  // 关闭选中
  function closeChecked() {
    emit('closeChecked')
  }
</script>

<style scoped lang="scss">
  @import '@/assets/styles/var.scss';
  .toolbars {
    width: 100%;
    height: 100%;
    background: $primaryColor;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: #fff;
    display: flex;
    align-items: center;
    .content {
      height: 100%;
      display: flex;
      align-items: center;
      flex: 1;
    }
    .item {
      height: 100%;
      padding: 0 20px;
      display: flex;
      align-items: center;
      text-align: center;
      cursor: pointer;
    }
    .item:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    .float-right {
      float: right;
    }
  }
</style>
